<!-- 客户管理-客户信息 -->
<template>
  <div class="client-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <!-- <template #buts>
        <a-button type="primary" @click="save">保存</a-button>
        <a-button @click="cancel">取消</a-button>
      </template> -->
    </pageHeader>
    <div class="client-detail-header">
      <h1>
        {{ clientDetailList.name }}
      </h1>
      <div
        :style="{
          display: 'flex',
          lineHeight: '32px',
        }"
      >
        <div>负责人：</div>
        <!-- <div class="content-wrapper">

        </div> -->

        <a-tooltip
          :style="{
            color: '#165DFF',
            marginRight: '20px',
            marginLeft: '10px',
          }"
          content="点击重新分配"
        >
          <div
            style="color: #165dff; cursor: 'pointer'"
            @click="AssignPersonnel"
          >
            {{ clientDetailList.salesName || '暂未分配负责人' }}
          </div>
        </a-tooltip>
        <!-- <a-button
          :style="{
            backgroundColor: '#62bf82',
          }"
          type="primary"
          @click="AssignPersonnel"
          >重新分配</a-button
        > -->
      </div>
      <div
        :style="{
          display: 'flex',
          marginTop: '20px',
        }"
      >
        <div>更新时间：</div>
        <div>
          {{
            dayjs.unix(clientDetailList.updatedAt).format('YYYY-MM-DD HH:mm:ss')
          }}
        </div>
      </div>
      <div>
        <div
          :style="{
            marginTop: '20px',
            marginBottom: '20px',
          }"
        >
          跟进状态：
          <!-- <icon-edit
            :style="{
              fontSize: '20px',
              cursor: 'pointer',
              color: '#165DFF',
            }"
            @click="changeState"
          /> -->
        </div>
      </div>
      <div>
        <a-steps
          small
          :changeable="false"
          :current="store.currState"
          type="arrow"
        >
          <a-step v-for="item in stateList" :key="item.id">
            {{ item.name }}
          </a-step>
        </a-steps>
      </div>
      <!-- <div
        :style="{
          marginTop: '20px',
        }"
      >
        <div>
          客户联系人：
          <span
            :style="{
              cursor: 'pointer',
              color: '#165DFF',
            }"
            @click="goContactDetail"
            >查看全部></span
          >
        </div>
        <div
          :style="{
            marginTop: '20px',
          }"
        >
          <div>
            {{ store.currContactName }}
          </div>
        </div>
      </div> -->
    </div>
    <div class="client-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <clientFollowRecord
            :client-name="clientDetailList.name"
            :stateList="stateList"
            v-if="item.key === '1'"
            ref="followRecordRef"
          ></clientFollowRecord>
          <baseInfo v-else-if="item.key === '2'"></baseInfo>
          <businessManager
            :salesName="clientDetailList.salesName"
            v-else-if="item.key === '3'"
          ></businessManager>
          <demandDecision v-else-if="item.key === '4'"></demandDecision>
          <clientContact v-else-if="item.key === '5'"></clientContact>
          <clientTrade v-else-if="item.key === '6'"></clientTrade>
          <contractRecord v-else-if="item.key === '7'"></contractRecord>
          <clientConsignee v-else-if="item.key === '8'"></clientConsignee>
          <afterSale v-else-if="item.key === '9'"></afterSale>
          <clientEnclosure v-else></clientEnclosure>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- <stateStapsModal
      v-model:visible="isChangeState"
      @changeStepsEmit="changeStepsEmit"
      :state="clientDetailList.state"
      :state-list="stateList"
    ></stateStapsModal> -->
    <PersonnelAssign
      v-model:visible="modelVisible"
      @assignment="assignment"
    ></PersonnelAssign>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    watchEffect,
    watch,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute } from 'vue-router';
  import { useOrderStore } from '@/store';
  import dayjs from 'dayjs';
  import {
    GetClientDetail,
    PutClientSales,
  } from '@/api/order-management/client-management/client-list/index';
  import { GetClientStateSet } from '@/api/order-management/client-management/base-setting/index';
  // import clientFollowRecord from './components/client-follow-record/index.vue';
  import baseInfo from './components/base-info/index.vue';
  import businessManager from './components/business-manager/index.vue';
  import demandDecision from './components/demand-decision/index.vue';
  // import stateStapsModal from './components/state-steps-modal/index.vue';
  import clientContact from './components/client-contact/index.vue';
  import clientTrade from './components/client-trade/index.vue';
  import contractRecord from './components/contract-record/index.vue';
  import collectionInvoice from './components/collection-invoice/index.vue';
  import afterSale from './components/after-sale/index.vue';
  import clientEnclosure from './components/client-enclosure/index.vue';
  import PersonnelAssign from './components/assign-personnel/index.vue';
  import clientConsignee from './components/client-consignee/index.vue';

  let clientFollowRecord = defineAsyncComponent(
    () => import('./components/client-follow-record/index.vue')
  );

  const route = useRoute();
  const store = useOrderStore();

  const id = route.query.id; // 客户id

  const title: string = '客户信息';
  const modelVisible = ref(false);
  const breadCrumb: string[] = ['订单管理', '客户管理', '客户列表', '客户详情'];

  const clientDetailList: any = reactive({}); // 储存客户详情信息

  const stateList: any = ref([]); // 储存状态列表
  const getClientDetailData = async () => {
    try {
      const res: any = await Promise.all([
        GetClientDetail({
          id,
        }),
        GetClientStateSet(),
      ]);
      console.log(res[1]);

      for (let i in res[0]) {
        clientDetailList[i] = res[0][i];
      }
      store.currState =
        res[1].findIndex((item) => item.id === clientDetailList.state) + 1;
      store.currClientName = clientDetailList.salesName;
      store.currContactName = clientDetailList.contactName;
      stateList.value = res[1];
      // for (let i in res[1]) {
      //   stateList.push(res[1][i]);
      // }
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getClientDetailData();

  let tabsActive = ref('1'); // 储存当前活跃的tabs， 默认为第一个tabs
  const tabs = reactive([
    {
      key: '1',
      title: '客户跟进记录',
    },
    {
      key: '2',
      title: '基本信息',
    },
    {
      key: '3',
      title: '业务员（经理）',
    },
    {
      key: '4',
      title: '客户需求信息与决策流程',
    },
    {
      key: '5',
      title: '客户联系人',
    },

    {
      key: '6',
      title: '客户交易记录',
    },
    // {
    //   key: '7',
    //   title: '合同记录',
    // },
    {
      key: '8',
      title: '收货人信息',
    },
    // {
    //   key: '8',
    //   title: '收款与发票记录',
    // },
    // {
    //   key: '9',
    //   title: '售后服务记录',
    // },
    // {
    //   key: '10',
    //   title: '客户附件列表',
    // },
  ]);

  // 前往客户联系人详情页
  const goContactDetail = () => {
    tabsActive.value = '5'; // 跳往客户联系人的tabs
  };

  const AssignPersonnel = () => {
    modelVisible.value = true;
  };

  // 分配销售负责人自定义事件
  const assignment = async (key: number) => {
    await PutClientSales({ id: Number(id), salesId: key });
    getClientDetailData();
  };

  // 修改跟进状态
  // const setCurrent = (current: number) => {
  //   clientDetailList.current = current;
  // };
</script>

<style scoped lang="less">
  .client-detail {
    &-header {
      padding: 10px 30px;

      :deep(.arco-avatar-square) {
        margin-right: 20px;
      }
    }
  }
</style>
